<template>
    <div>
        <el-aside :width="width">
            <h5>千锋管理系统</h5>
            <el-menu  :collapse="collapse" :default-openeds="['1', '3']" router background-color="skyblue">
                <el-menu-item index="/home/welcome">欢迎页面</el-menu-item>
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon>
                            <User />
                        </el-icon><span>用户管理</span>
                    </template>
                    <el-menu-item index="/home/user/index"><span>用户列表</span></el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="2">
                    <template #title>
                        <el-icon>
                            <User />
                        </el-icon><span>电影管理</span>
                    </template>
                    <el-menu-item index="/home/film/index"><span>电影列表</span></el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="3">
                    <template #title>
                        <el-icon>
                            <User />
                        </el-icon><span>影院管理</span>
                    </template>
                    <el-menu-item index="/home/cinema/index"><span>影院列表</span></el-menu-item>
                </el-sub-menu>
            </el-menu>
            
        </el-aside>
    </div>
</template>

<script setup lang="ts">
import { User } from '@element-plus/icons-vue';
import { routes } from '../router/index';
import { computed } from "vue"
import { useCounterStore } from "@/stores/counter"
let store = useCounterStore()
defineProps({
    width: {
        type: String
    },
    collapse: {
        type: Boolean
    }
})
const userInfo:any = computed(() => {
    return store.userInfo
})

</script>

<style scoped>
.el-aside {
    height: 100%;
    background-color: #ccc;
}
.el-menu{
    border: none;
}
</style>